<template>
  <div :class="[styles.field, border && styles.border]">
    <div :class="styles.left">
      <slot :class="styles.leftIcon" name="leftIcon"></slot>
      <span>{{ title }}</span>
    </div>
    <div :class="styles.right">
      <input
        type="text"
        maxlength="30"
        :class="styles.input"
        confirm-type="done"
        :placeholder="placeholder"
        :adjust-position="true"
        :value="value"
        @change="inputChange"
      />
      <slot name="rightSlot"></slot>
    </div>
  </div>
</template>
<script>
import styles from './index.module.less';

export default {
  emits: ['update:value'],
  props: {
    title: String,
    value: String,
    placeholder: String,
    border: Boolean,
  },

  setup(props, { emit }) {
    const inputChange = (e) => {
      emit('update:value', e.detail.value);
    };
    return {
      styles,
      inputChange,
    };
  },
};
</script>
